<script>
// 流向分析

export default {
  name: 'FlowAnalysis',
  props: {
    analysData: {
      type: Object,
      default: () => {},
    },
    //查询服务地址
    service: {
      type: String,
      default: '',
    },
    mapData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      defaultParams: {},
      countHeader: [], //统计name
      countData: [], //统计结果data
      spinShow: false,
    };
  },
  computed: {},
  watch: {
    analysData: {
      handler(newVal) {
        if (Object.keys(newVal).length !== 0) {
          this.defaultParams = {
            path: newVal.layers,
            fieldMap: newVal.params,
            destcrs: 'EPSG:2382',
          };
          this.flowAnalys();
        }
      },
    },
  },
  mounted() {},
  methods: {
    // 得到指定类型的地图
    getMapData(type) {
      return this.mapData.filter(item => item.num === type);
    },
    // 分析接口
    changeQuery(url, data) {
      return this.$store.dispatch(`${this.finalMapData[0].mapId}/MAP_WPS_STARTCHANGES`, {
        url,
        ...data,
      });
    },
    // 分析得到流向矩阵数据
    async flowAnalys() {
      this.spinShow = true;
      if (!this.finalMapData) this.finalMapData = this.getMapData(3);
      let analysData = [{ ...this.defaultParams }, { ...this.defaultParams, stats: true }];
      await Promise.all(
        analysData.map(data =>
          this.$store.dispatch(`${this.finalMapData[0].mapId}/MAP_WPS_STARTCHANGES`, {
            url: this.service,
            ...data,
          })
        )
      ).then(response => {
        this.flowTotalData = JSON.parse(response[0]);
        this.flowData = JSON.parse(response[1]);
        this.setFlowData();
      });
    },
    // 做单个分析
    startDbtbChange(options) {
      this.queryLayer = [];
      if (options) {
        this.startChangesOptions = options;
      }
      // 参数设置
      let data = {
        path: this.startChangesOptions.layers,
        fieldMap: this.startChangesOptions.params,
        // destcrs: this.startChangesOptions.relCrs,
        destcrs: 'EPSG:2382',
      };

      if (options.getOne) {
        data.getOne = options.getOne;
      } else {
        data.stats = true;
      }

      new Promise((resolve, reject) => {
        const hasList = this.changeQuery(this.service, data);
        resolve(hasList);
      }).then(res => {});
    },
    // 处理流向数据
    setFlowData() {
      let horizontalAxis = []; //横轴
      let verticalAxis = []; //纵轴
      this.countData = [];
      this.countHeader = [];
      let table = document.getElementById('flow-table'); //取得自定义的表对象
      let clearBody = table.tBodies[0];
      if (clearBody) clearBody.innerHTML = '';

      let newRow = table.insertRow();
      var innerHtml =
        "<th><div style='border-style:solid; border-width: 1px 0 0 1px;'><div class=\"table-header\"><div style='margin-top: -28px;float: right;margin-right: -23px;width: 24px;'>历史</div><div style='margin-left: -40px;float: left;'>现状</div></div><div></th>";

      //获得横轴纵轴字段内容
      this.flowData.arr.forEach(array => {
        verticalAxis.push(array.filed);
        horizontalAxis.push(array.filed);
        innerHtml += "<th class='formdiv'>" + array.filed + '</th>';
      });

      //给头部填充字段
      newRow.innerHTML = innerHtml;

      verticalAxis.forEach(vertData => {
        newRow = table.insertRow();
        newRow.innerHTML = "<th class='vertical-div'>" + vertData + '</th>';
        this.countHeader.push(vertData); //统计用
        horizontalAxis.forEach(horiData => {
          let NewCell = newRow.insertCell();
          if (horiData === vertData) {
            for (let i = 0; i < this.flowData.arr.length; i++) {
              if (this.flowData.arr[i].filed == horiData) {
                if (this.flowData.arr[i].TotalArea < 0) {
                  NewCell.style.background = '#19be6b';
                  NewCell.style.color = '#fff';
                } else {
                  NewCell.style.background = '#ed3f14';
                  NewCell.style.color = '#fff';
                }
                const comData = (this.flowData.arr[i].TotalArea / 10000).toFixed(4);
                NewCell.innerHTML = comData;
                this.countData.push(Number(comData));
                break;
              }
            }
          }
          for (let j = 0; j < this.flowTotalData.arr.length; j++) {
            if (
              this.flowTotalData.arr[j].toDl == vertData &&
              this.flowTotalData.arr[j].fromDl == horiData
            ) {
              NewCell.innerHTML = (this.flowTotalData.arr[j].area / 10000).toFixed(4);
              break;
            }
          }
        });
      });
      this.spinShow = false;
    },
    showHistogram() {},
  },
};
</script>
<template>
  <div class="datav-flow-analys">
    <Spin
      v-if="spinShow"
      fix>
      <loading type="ball-grid-pulse" />
    </Spin>
    <table
      id="flow-table"
    >
      <caption>流向矩阵表（单位：公顷）</caption>
    </table>
    <Button
      class="show-histogram"
      type="success"
      size="small"
      @click.native="showHistogram">柱状图</Button>
  </div>
</template>
<style lang="less" scoped>
.datav-flow-analys {
  position: relative;
  text-align: center;
  width: 100%;
  height: calc(~'100vh - 100px');
  overflow-y: auto;
  overflow-x: auto;

  table#flow-table {
    margin: 0 auto;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    color: #333333;
    border: 1px solid #666666;
    border-collapse: collapse;
  }

  table#flow-table /deep/th:nth-child(n + 2) {
    border-width: 1px;
    padding: 5px;
    border-style: solid;
  }

  table#flow-table /deep/td {
    border-width: 1px;
    padding: 5px;
    border-style: solid;
    text-align: center;
    border-color: #666666;
    background-color: #ffffff;
  }

  table /deep/caption {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
  }

  /deep/.formdiv {
    background-color: #efefef;
    padding: 0px;
    border: solid 1px;
  }

  /deep/.vertical-div {
    background-color: #d8d1d1;
    padding: 0px;
    border: solid 1px;
  }

  /deep/.table-header {
    height: 0px;
    width: 0px;
    padding: 0px;
    border-style: solid;
    border-width: 40px 52px 31px 65px;
    border-color: #efefef #efefef #d8d1d1 #d8d1d1;
  }
  .show-histogram {
    position: absolute;
    right: 20px;
    top: 0px;
  }
}
</style>
